<template>
  <div class="dflex leftAside">
    <div class="dflex logoName" :class="isCollapse ? 'el-menu--collapse' : ''">
      <lottie-animation ref="anim" :animationData="require('@/assets/iconfont/110207-rainbow-rain.json')" :loop="true"
        class="logo" />
      <span v-show="isCollapse ? false : true">管理系统</span>
    </div>
    <el-menu ref="menuBox" default-active="2" class="el-menu-vertical-demo" :unique-opened="true" :collapse="isCollapse"
      @open="handleOpen" @close="handleClose" :collapse-transition="false">
      <router-link :to="{ path: 'workbench' }">
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title">工作台
          </span>
        </el-menu-item>
      </router-link>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>仪表盘</span>
        </template>
        <el-menu-item-group>
          <router-link :to="{ path: 'Analysis' }">
            <el-menu-item index="2-1">
              分析页
            </el-menu-item>
          </router-link>
          <el-menu-item index="2-2">
            选项2
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>表单页</span>
        </template>
        <el-menu-item-group>
          <router-link to="FormPage">
            <el-menu-item index="3-1">表单1</el-menu-item>
          </router-link>
          <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>列表页</span>
        </template>
        <el-menu-item-group>
          <router-link to="RoleList">
            <el-menu-item index="4-1">列表1</el-menu-item>
          </router-link>
          <el-menu-item index="4-2">选项2</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>管理页</span>
        </template>
        <el-menu-item-group>
          <router-link to="ManagePage">
            <el-menu-item index="5-1">轮播图</el-menu-item>
          </router-link>
          <el-menu-item index="5-2">选项2</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="6">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>个人中心</span>
        </template>
        <el-menu-item-group>
          <router-link to="PersonalPage">
            <el-menu-item index="6-1">用户页</el-menu-item>
          </router-link>
          <el-menu-item index="6-2">选项2</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <a href="https://gitee.com/yyayaya/cms">
        <el-submenu index="7">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>本项目外链gitee地址</span>
          </template>
        </el-submenu>
      </a>
      <!-- <a href="">
        <el-submenu index="8">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>整理笔记</span>
          </template>
        </el-submenu>
      </a> -->
    </el-menu>
    <!-- 侧边栏开关 -->
    <div>
      <a href="#">
        <i class="fsize20" :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
          @click="isCollapse = !isCollapse; leftAside_IsCollapse()"></i>
      </a>
    </div>
    <router-link :to="{ name: 'loginlll', params: { userId: 123 } }">去登录页=></router-link>
  </div>
</template>

<script>
import LottieAnimation from 'lottie-web-vue';
import EventBus from '@/assets/ComponentLibrary/eventBus/eventBus.js';
export default {
  name: "LeftAside",
  data() {
    return {
      // 侧边栏 是否 收缩
      isCollapse: false,
    };
  },
  components: {
    LottieAnimation
  },
  created() {
    this.IsCollapseChange();
    // this.leftAside_IsCollapse();
  },
  methods: {
    // sub-menu 展开回调
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    // sub-menu 收起回调
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 给Header提供收缩状态
    IsCollapseChange() {
      // 接收;
      EventBus.on('header_IsCollapse', param => {
        this.isCollapse = !this.isCollapse;
        // console.log('leftAside收到');
        this.leftAside_IsCollapse();
      });
    },
    leftAside_IsCollapse() {
      // 发送
      EventBus.emit('leftAside_IsCollapse', {
        leftAside_IsCollapse: this.isCollapse
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.dflex {
  display: flex;
}

.el-menu {
  border: none;
}

.leftAside {
  flex-direction: column
}

.logoName {
  height: 64px;
  line-height: 64px;

  .logo {
    width: 50px;
  }
}

.fsize20 {
  font-size: 20px;
}
</style>
